import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Row, Col, Button, Space, Tabs, Input, InputNumber, Switch } from 'antd';
import { connect } from 'umi';
import { goodsType_status } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import { DragHandle } from '@/components/TableDataBlock/SortBlock';
import SelectModel from '@/components/PackagingModel/components/SelectModel'
const SettingOpeational = (props, ref) => {
  const { list, setList, hasSku, type } = props

  const [visible, setVisible] = useState(false)
  const handeleList = (e) => {
    let list = Object.values(e).reduce((item, val) => {
      return [...item, ...val]
    }, [])
    setList(list)
  }
  const setSelectList = () => {
    return list.reduce((item, val) => {
      const { goodsType } = val
      if (item[goodsType]) {
        item[goodsType].push({ ...val, })
        return item
      } else {
        item[goodsType] = []
        item[goodsType].push({ ...val })
        return item
      }
    }, {})
  }
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    }, {
      title: '商品类型',
      dataIndex: 'goodsType',
      render: (val) => {
        return goodsType_status[val]
      },
    }]
  return (
    <>
      <Row style={{ marginBottom: 12, display: 'flex', alignItems: 'center' }}>
        <Col style={{ textAlign: 'right', justifySelf: 'flex-end' }} span={6}>{type === 'intentionCourse' ? '意向课程' : '目标课程'}:</Col>
        <Col span={18}>
          <Button style={{ marginLeft: 8 }} onClick={() => {
            setVisible({ show: true, details: setSelectList(list) })
          }}>选择课程</Button>
        </Col>
      </Row>
      {
        list.length > 0 && <Col style={{ margin: '12px 0' }} offset={3} span={21}>
          <TableDataBlock
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            list={list}
          ></TableDataBlock>
        </Col>
      }
      <SelectModel offlineVisible={false} hasSku={hasSku} onOk={handeleList} visible={visible} onClose={() => setVisible(false)}></SelectModel>
    </>


  )
};
export default forwardRef(SettingOpeational)